<template>
  <div id="App">
    <b-button pill variant="outline-secondary" @click="showProvider">生产者</b-button>
    <b-button pill variant="outline-secondary" @click="showConsumer">消费者</b-button>
    <table id='table-demo-baseCode'></table>
  </div>
</template>
<script>
export default {
  name: 'App',
  mounted :function(){
   // this.init();
  },
  data(){
    return {
      ColData : {},
      url : "http://127.0.0.1:8888/list",
      providerColData : [
          {
              key: 'className',
              text: '服务名称'
          },{
              key: 'serverHost',
              text: '服务地址'
          },{
              key: 'methodName',
              text: '调用方法'
          },{
              key: 'args',
              text: '调用方法传递参数'
          },{
              key : 'result',
              text : '调用方法结果'
          }
      ],
      consumerColData : [
          {
              key: 'className',
              text: '调用的服务名称'
          },{
              key: 'clientHost',
              text: '消费者地址'
          },{
              key: 'methodName',
              text: '调用方法'
          },{
              key: 'args',
              text: '调用方法传递参数'
          },{
              key : 'success',
              text : '是否调用成功'
          },{
              key : 'result',
              text : '调用方法结果'
          }
      ]
    }

  },
  methods:{
    showProvider : function(){
        this.ColData = this.providerColData;
        this.init();
    },
    showConsumer : function(){
        this.ColData = this.consumerColData;
        this.init();
    },
    init : function () {
      document.querySelector('#table-demo-baseCode').GM({
          gridManagerName: 'demo-baseCode',
          ajaxData :this.url,
         // ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
          ajaxType: 'POST',
          supportAjaxPage: true,
          columnData: this.ColData
      })
    }
  }
}

</script>
